<template>
  <div class="page-container">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2>数据导出</h2>
    </div>

    <!-- 快捷导出按钮 -->
    <div class="card mb-4">
      <div class="card-body">
        <div class="row">
          <div class="col-md-12">
            <div class="d-flex flex-wrap gap-3 justify-content-center">
              <button type="button" class="btn btn-primary btn-lg px-4 py-3" @click="quickExport('all')">
                <i class="bi bi-file-earmark-spreadsheet fs-4 d-block mb-2"></i> 
                项目总体统计表
              </button>
              <button type="button" class="btn btn-warning btn-lg px-4 py-3" @click="quickExport('delayed')">
                <i class="bi bi-file-earmark-spreadsheet fs-4 d-block mb-2"></i> 
                滞后项目统计表
              </button>
              <button type="button" class="btn btn-info btn-lg px-4 py-3" @click="quickExport('important')">
                <i class="bi bi-file-earmark-spreadsheet fs-4 d-block mb-2"></i> 
                重点项目统计表
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 历史记录 -->
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">导出历史记录</h5>
      </div>
      <div class="card-body">
        <div v-if="exportHistory.length > 0">
          <div class="table-responsive">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>文件名</th>
                  <th>内容</th>
                  <th>格式</th>
                  <th>生成时间</th>
                  <th>操作人</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in paginatedHistory" :key="index">
                  <td>{{ item.fileName }}</td>
                  <td>{{ item.content }}</td>
                  <td>
                    <span class="badge" :class="getFormatBadgeClass(item.format)">
                      {{ item.format.toUpperCase() }}
                    </span>
                  </td>
                  <td>{{ item.date }}</td>
                  <td>{{ item.exportedBy }}</td>
                  <td>
                    <div class="btn-group">
                      <button class="btn btn-primary" @click="downloadFile(item)" title="下载文件">
                        <i class="bi bi-download me-1"></i> 下载
                      </button>
                      <button class="btn btn-danger" @click="deleteHistoryItem(index)" title="删除记录">
                        <i class="bi bi-trash me-1"></i> 删除
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 分页控件 -->
          <div class="d-flex justify-content-between align-items-center mt-3">
            <div>
              <span class="text-muted">共 {{ exportHistory.length }} 条记录，当前显示 {{ startIndex + 1 }}-{{ Math.min(endIndex, exportHistory.length) }} 条</span>
            </div>
            <div>
              <nav aria-label="Page navigation">
                <ul class="pagination pagination-sm mb-0">
                  <li class="page-item" :class="{ disabled: currentPage === 1 }">
                    <a class="page-link" href="#" @click.prevent="changePage(1)">首页</a>
                  </li>
                  <li class="page-item" :class="{ disabled: currentPage === 1 }">
                    <a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)">上一页</a>
                  </li>
                  <li v-for="page in displayedPages" :key="page" class="page-item" :class="{ active: currentPage === page }">
                    <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
                  </li>
                  <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                    <a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)">下一页</a>
                  </li>
                  <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                    <a class="page-link" href="#" @click.prevent="changePage(totalPages)">末页</a>
                  </li>
                </ul>
              </nav>
            </div>
            <div>
              <select class="form-select form-select-sm" style="width: auto;" v-model="pageSize" @change="currentPage = 1">
                <option :value="5">5条/页</option>
                <option :value="10">10条/页</option>
                <option :value="20">20条/页</option>
                <option :value="50">50条/页</option>
              </select>
            </div>
          </div>
        </div>
        <div v-else class="text-center py-4">
          <p class="text-muted">暂无导出历史记录</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(exportHistory.value.length / pageSize.value)
})

// 计算当前页显示的记录
const startIndex = computed(() => {
  return (currentPage.value - 1) * pageSize.value
})

const endIndex = computed(() => {
  return startIndex.value + pageSize.value
})

const paginatedHistory = computed(() => {
  return exportHistory.value.slice(startIndex.value, endIndex.value)
})

// 计算要显示的页码
const displayedPages = computed(() => {
  const pages = []
  const maxPagesToShow = 5
  
  if (totalPages.value <= maxPagesToShow) {
    // 如果总页数小于等于要显示的最大页数，则显示所有页码
    for (let i = 1; i <= totalPages.value; i++) {
      pages.push(i)
    }
  } else {
    // 否则，显示当前页附近的页码
    let startPage = Math.max(currentPage.value - Math.floor(maxPagesToShow / 2), 1)
    let endPage = startPage + maxPagesToShow - 1
    
    if (endPage > totalPages.value) {
      endPage = totalPages.value
      startPage = Math.max(endPage - maxPagesToShow + 1, 1)
    }
    
    for (let i = startPage; i <= endPage; i++) {
      pages.push(i)
    }
  }
  
  return pages
})

// 切换页码
const changePage = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
  }
}

// 历史记录
const exportHistory = ref([
  {
    fileName: '项目总体统计表_2025-03-15.xlsx',
    content: '项目基本信息, 进度数据, 投资情况',
    format: 'excel',
    date: '2025-03-15 10:30',
    exportedBy: '系统管理员'
  },
  {
    fileName: '滞后项目统计表_2025-03-10.xlsx',
    content: '滞后项目信息, 进度偏差, 原因分析',
    format: 'excel',
    date: '2025-03-10 14:45',
    exportedBy: '李工'
  },
  {
    fileName: '重点项目统计表_2025-03-05.xlsx',
    content: '重点项目信息, 进度数据, 投资情况',
    format: 'excel',
    date: '2025-03-05 09:15',
    exportedBy: '王工'
  },
  {
    fileName: '项目总体统计表_2025-02-15.xlsx',
    content: '项目基本信息, 进度数据, 投资情况',
    format: 'excel',
    date: '2025-02-15 11:20',
    exportedBy: '系统管理员'
  },
  {
    fileName: '滞后项目统计表_2025-02-10.xlsx',
    content: '滞后项目信息, 进度偏差, 原因分析',
    format: 'excel',
    date: '2025-02-10 15:30',
    exportedBy: '李工'
  },
  {
    fileName: '重点项目统计表_2025-02-05.xlsx',
    content: '重点项目信息, 进度数据, 投资情况',
    format: 'excel',
    date: '2025-02-05 09:45',
    exportedBy: '王工'
  },
  {
    fileName: '项目总体统计表_2025-01-15.xlsx',
    content: '项目基本信息, 进度数据, 投资情况',
    format: 'excel',
    date: '2025-01-15 10:15',
    exportedBy: '系统管理员'
  },
  {
    fileName: '滞后项目统计表_2025-01-10.xlsx',
    content: '滞后项目信息, 进度偏差, 原因分析',
    format: 'excel',
    date: '2025-01-10 16:30',
    exportedBy: '李工'
  },
  {
    fileName: '重点项目统计表_2025-01-05.xlsx',
    content: '重点项目信息, 进度数据, 投资情况',
    format: 'excel',
    date: '2025-01-05 09:20',
    exportedBy: '王工'
  },
  {
    fileName: '项目总体统计表_2024-12-15.xlsx',
    content: '项目基本信息, 进度数据, 投资情况',
    format: 'excel',
    date: '2024-12-15 10:45',
    exportedBy: '系统管理员'
  },
  {
    fileName: '滞后项目统计表_2024-12-10.xlsx',
    content: '滞后项目信息, 进度偏差, 原因分析',
    format: 'excel',
    date: '2024-12-10 14:15',
    exportedBy: '李工'
  },
  {
    fileName: '重点项目统计表_2024-12-05.xlsx',
    content: '重点项目信息, 进度数据, 投资情况',
    format: 'excel',
    date: '2024-12-05 09:30',
    exportedBy: '王工'
  }
])

// 获取格式对应的样式类
const getFormatBadgeClass = (format) => {
  switch (format.toLowerCase()) {
    case 'excel':
      return 'bg-success'
    case 'csv':
      return 'bg-info'
    case 'pdf':
      return 'bg-danger'
    case 'word':
      return 'bg-primary'
    default:
      return 'bg-secondary'
  }
}

// 快捷导出功能
const quickExport = (type) => {
  const date = new Date().toISOString().split('T')[0]
  let fileName = ''
  let contentDesc = ''
  
  switch (type) {
    case 'all':
      fileName = `项目总体统计表_${date}.xlsx`
      contentDesc = '项目基本信息, 进度数据, 投资情况'
      break
    case 'delayed':
      fileName = `滞后项目统计表_${date}.xlsx`
      contentDesc = '滞后项目信息, 进度偏差, 原因分析'
      break
    case 'important':
      fileName = `重点项目统计表_${date}.xlsx`
      contentDesc = '重点项目信息, 进度数据, 投资情况'
      break
  }
  
  // 添加到导出历史
  exportHistory.value.unshift({
    fileName,
    content: contentDesc,
    format: 'excel',
    date: `${date} ${new Date().toTimeString().split(' ')[0]}`,
    exportedBy: '当前用户'
  })
  
  // 显示成功消息
  alert(`导出文件 ${fileName} 已生成！`)
  
  // 重置到第一页
  currentPage.value = 1
}

// 下载文件
const downloadFile = (item) => {
  // 这里应该是实际的文件下载逻辑
  // 目前只是模拟
  alert(`正在下载Excel文件: ${item.fileName}`)
  
  // 在实际应用中，这里应该调用后端API来获取文件并触发浏览器下载
  // 例如：
  // const downloadUrl = `/api/download?fileName=${encodeURIComponent(item.fileName)}`
  // window.open(downloadUrl, '_blank')
}

// 删除历史记录
const deleteHistoryItem = (index) => {
  if (confirm('确定要删除此记录吗？此操作不会删除实际文件，仅删除记录。')) {
    const actualIndex = startIndex.value + index
    exportHistory.value.splice(actualIndex, 1)
    
    // 如果当前页没有数据了，且不是第一页，则跳转到上一页
    if (paginatedHistory.value.length === 0 && currentPage.value > 1) {
      currentPage.value--
    }
  }
}
</script>

<style scoped>
.badge {
  padding: 0.5em 0.75em;
}

.bg-success {
  background-color: #28a745 !important;
}

.bg-info {
  background-color: #17a2b8 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

.bg-primary {
  background-color: #007bff !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

.card {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  margin-bottom: 1.5rem;
}

.table th, .table td {
  vertical-align: middle;
  padding: 0.75rem 1rem;
}

.btn-group .btn {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 4px;
  margin-right: 0.5rem;
}

.form-label {
  font-weight: 500;
}

.btn-lg {
  min-width: 200px;
  margin: 0 10px;
  text-align: center;
}
</style> 